<template>
  <el-collapse v-model="activeName" accordion>
    <!-- 榜单一级 -->
    <el-collapse-item title="男生榜" name="1">
      <div
        v-for="item in male"
        :key="item._id"
        @click="change(item)"
        :class="{activeCjs:item._id==active}"
      >{{item.title}}</div>
    </el-collapse-item>
    <el-collapse-item title="女生榜" name="2">
      <div
        v-for="item in female"
        :key="item._id"
        @click="change(item)"
        :class="{activeCjs:item._id==active}"
      >{{item.title}}</div>
    </el-collapse-item>
    <el-collapse-item title="原创" name="3">
      <div
        v-for="item in epub"
        :key="item._id"
        @click="change(item)"
        :class="{activeCjs:item._id==active}"
      >{{item.title}}</div>
    </el-collapse-item>
    <el-collapse-item title="绘本" name="4">
      <div
        v-for="item in picture"
        :key="item._id"
        @click="change(item)"
        :class="{activeCjs:item._id==active}"
      >{{item.title}}</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { sort } from "@/api/cjs/sort";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      activeName: "1",
      female: [],
      male: [],
      epub: [],
      picture: [],
      active: "54d42d92321052167dfb75e3"
    };
  },
  created() {
    sort().then(res => {
      let sortObj = res.data;
      this.female = sortObj.female;
      this.male = sortObj.male;
      this.epub = sortObj.epub;
      this.picture = sortObj.picture;
      this.setSort(this.female[0]);
    });
  },
  methods: {
    ...mapMutations({ setSort: "SET_SORT" }),
    change(item) {
      if (this.$route.query.id !== item._id) {
        this.$router.push({ path: "/4/all", query: { id: item._id } });
        this.setSort(item);
        this.active = item._id;
      }
    }
  }
};
</script>

<style>
.el-collapse-item__content > div {
  cursor: pointer;
  line-height: 36px;
  font-size: 14px;

}
.el-collapse-item__content > div:hover {
  background-color: #ccc;
}
.activeCjs {
  background-color: #ccc;
}

.el-collapse-item__header{
  height: 70px!important;
  line-height: 60px!important;
  font-weight: 900!important;
}
.el-collapse-item__header{
  padding-left: 116px;
  font-size: 18px!important;
}
.el-collapse-item__header.is-active{  
  color: #fff;
  background-color: #333;

}

</style>

